<template>
    <Card class="content">
      <div class="info">
        <div class="avater" @mouseenter="toRotate" @mouseleave="stopRotate" title="转起来咯~点一下可以把头像摆正">
          <img ref="avater" src="https://i.ejiaimg.cn/234/2025/02/14/67af3b06383d7.jpg" alt="头像没加载出来"
            @click="resetAvater">
        </div>
        <p class="name">超级无敌霹雳大狗熊</p>
      </div>
      <div class="intro info-text">
        <p>
          那不是我，但是那不是我吗
        </p>
      </div>
      <div class="navigate"> <!-- 所有导航 -->
        <div class="navigate-svg"> <!-- 站外导航 -->
          <Github @click="openWebSide('https://github.com/l1141275900')"></Github>
          <Juejin @click="openWebSide('https://juejin.cn/user/2854764987563853')"></Juejin>
          <Wangyiyun @click="openWebSide('https://music.163.com/#/user/home?id=599712219')"></Wangyiyun>
        </div>
        <div class="navigate-button"> <!-- 导航 -->
          <Button :class="{'button-action':(route.fullPath==pageName.主页)}" :wave="true" :route="pageName.主页" @click="closeNav()">
            <template #svg>
              <Bear :color="changeIconColor(pageName.主页)"></Bear>
            </template>
            <template #info>
              <p>主页</p>
            </template>
          </Button>
          <Button :class="{'button-action':(route.fullPath==pageName.标签)}" :wave="true" :route="pageName.标签" @click="closeNav()">
            <template #svg>
              <Tag :color="changeIconColor(pageName.标签)"></Tag>
            </template>
            <template #info>
              <p>标签-没弄好</p>
            </template>
          </Button>
          <Button :class="{'button-action':(route.fullPath==pageName.友链)}" :wave="true" :route="pageName.友链" @click="closeNav()">
            <template #svg>
              <Friends :color="changeIconColor(pageName.友链)"></Friends>
            </template>
            <template #info>
              <p>友链</p>
            </template>
          </Button>
          <Button :class="{'button-action':(route.fullPath==pageName.更新记录)}" :wave="true" :route="pageName.更新记录" @click="closeNav()">
            <template #svg>
              <Update :color="changeIconColor(pageName.更新记录)"></Update>
            </template>
            <template #info>
              <p>更新记录</p>
            </template>
          </Button>
          <Button :class="{'button-action':(route.fullPath==pageName.熊的故事)}" :wave="true" @click="closeNav()">
            <template #svg>
              <Story :color="changeIconColor(pageName.熊的故事)"></Story>
            </template>
            <template #info>
              <p>碎碎念-没弄好</p>
            </template>
          </Button>
        </div>
      </div>
    </Card>
</template>
<script lang="ts" setup>
import Github from '../../assets/svg/Github.vue'
import Juejin from '../../assets/svg/Juejin.vue'
import Wangyiyun from '../../assets/svg/Wangyiyun.vue';
import Bear from '../../assets/svg/Bear.vue'
import Tag from '../../assets/svg/Tag.vue'
import Friends from '../../assets/svg/Friends.vue';
import Story from '../../assets/svg/Story.vue';
import Update from '@/assets/svg/Update.vue'

import Button from '@/components/Button/Button.vue'
import Card from '../Card/Card.vue';
import { ref } from 'vue'

import emitter from '@/utils/emitter';

//旋转头像
const avater: any = ref(null)  //确保取dom的ref变量能被return，setup语法糖中只有浅层变量能被返回
let timer:any
let deg = 0   //旋转初始位置
let v = 0//初速度
let a = 0.05//加速度
function toRotate() {  //旋转函数
  a = 0.05
  clearInterval(timer)  //先清除干净
  if (avater.value) {
    timer = setInterval(() => {
      deg += v  //路程增加
      v += a        //速度增加
      deg %= 360
      avater.value.style.rotate = deg.toString() + 'deg'  //操作dom
    }, 10)
  }
}
function stopRotate() {
  a = 0.1
  clearInterval(timer)
  timer = setInterval(() => {

    deg += v   //路程放慢
    v -= a               //速度减少
    deg %= 360

    avater.value.style.rotate = deg.toString() + 'deg'    //操作dom
    if (v <= 0) {   //减速完成
      // avater.value.style.rotate = '0deg'
      clearInterval(timer)
      //初始化速度↓
      v = 0//初速度
    }

  }, 10)
}
//重置头像
function resetAvater() {
  avater.value.style.rotate = '0deg'
  deg = 0   //旋转初始位置
  v = 0//初速度
  clearInterval(timer)
}

//打开外链
function openWebSide(webSide:string){
  window.open(webSide)
}

//发送emit关闭路由组件
const closeNav = () => {
  emitter.emit('closeNav');
}

//切换路由
import { pageName } from '@/types/viewName'
import {useRoute} from 'vue-router'
const route = useRoute()

function changeIconColor(path:string){
  if(route.fullPath == path){   //如果当前路径与导航目标路径相同
    return 'white'
  }else{
    return '#909399'
  }
}
</script>
<style lang="scss" scoped>
.avater {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  overflow: hidden;
  margin: 10px auto;
}

img {
  height: 100%;
  cursor: pointer;
}

.intro {
  margin: 5px;
  text-align: center;

  p {
    padding: 10px 0px;
  }
}

.info {
  display: flex;
  flex-direction: column;

  .name {
    font-size: $title-size;
    text-align: center;
    font-family: '苍耳2';
  }
}

.navigate {
  display: flex;
  flex-direction: column;
  justify-items: center;

  &-button {
    display: flex;
    flex-direction: column;

    p {
      margin-left: 5px;
      line-height: 24px;
    }
  }

  &-svg {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid $theme-border;
  }
}

.content{
  background-color: white;
}
</style>